<template>
  <div style="height: 100vh;overflow-x: hidden; background-color:#DCDFE6; ;" class="wrapper">
     <!-- 回到顶部 -->
      <el-backtop target=".wrapper">
        <i class="el-icon-caret-top"></i>
      </el-backtop>
      

      
      <!-- 头部导航 -->
  <Head aIndex="1" ></Head>
      <!-- 中间内容 -->
      <div style="margin-top: 5px; ">
        <el-row :gutter="30" style="background-color:#DCDFE6; " >

          <!-- 左侧 -->
          <el-col :span="16" :offset="1">
           <!-- 简介 -->
              <!-- <el-card class="box-card" style="background-color: #DCDFE6;">
                 <div style="text-align: center;">
                   <img width="100%" height="auto" src="https://img1.baidu.com/it/u=3478586705,4118991796&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1660928400&t=48fe291e0bc8a914df041b061c0b5168" />
                  </div>
              </el-card> -->
            <div class="grid-content bg-purple blog_bg_left"> 

              <el-row :gutter="20">
                <el-col :span="12"><div style="margin: 15px 0px 15px 20px;color: blueviolet;">文章</div></el-col>
                <el-col :span="12"><div style="float: right;margin: 10px 20px 0px 0px;">共 <span style="font-size: 28px;color: rgb(6, 154, 240);">{{total}}</span> 篇</div></el-col>
              </el-row>

              <!-- 分割线 -->
              <div class="fenge"></div>
              <!-- <el-divider></el-divider> -->

              <!-- 文章 -->
              <div>
                 <div class="blog_card" v-for="(item,index) in blogData" :key="index" >

                 <router-link :to="'/blog/'+item.id">
                  <el-card shadow="hover" :body-style="{ padding: '15px' }" >
                    <el-row :gutter="50">
                      <el-col :span="17">
                        <div>                        
                           <h4>{{item.title}}</h4>
                           <p style="font-size: 17px;">{{item.description}}</p>
                           <div>
                            <el-avatar style="vertical-align:middle" :src="item.tuser.avatar"></el-avatar>
                            <span style="margin-left: 5px;">{{item.tuser.username}}</span>
                            <i style="margin-left: 20px;" class="el-icon-date" ><span style="font-size: 16px;"> {{item.createTime}}</span></i>
                            <i style="margin-left: 20px;" class="el-icon-view"><span style="font-size: 16px;"> {{item.views}}</span></i>
                            <i style="margin-left: 20px;" class="el-icon-chat-line-square"><span style="font-size: 15px;"> {{item.commentCount}}</span></i>
                           </div>

                        </div>
                      </el-col>
                      <el-col :span="7">
                        <div>
                          <el-image 
                            style="width: 230px; height: 130px"
                            :src="item.firstPicture" 
                            >
                          </el-image>
                          <div style="margin-bottom: 10px;">
                            <el-tag style="margin-right: 10px;" ><span> {{item.flag}}</span></el-tag>
                            <el-tag style="margin-right: 10px;" type="success"><span > {{item.ttype.name}}</span></el-tag>
                            <!-- <el-tag style="margin-right: 10px;" type="info" ><span> {{tag.ttag.name}}</span></el-tag> -->
                           
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </el-card>
                 </router-link>
                  <el-divider></el-divider>      
                 </div>
              </div>
              <div style="margin-left: 2%;padding-bottom: 2%;">
                  <!-- 分页 -->
                  <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage"
                  :page-size="size"
                  layout="total, prev, pager, next"
                  :total="total">
                  </el-pagination>
              </div>
            </div>
          </el-col>

          <!-- 右侧 -->
          <el-col :span="6" >
            <div class="grid-content bg-purple ">
              <!-- 简介 -->
              <el-card class="box-card" style="background-color: #DCDFE6">
                 <div style="text-align: center;">
                     <el-carousel indicator-position="outside">
    <el-carousel-item v-for="item in img_list" :key="item">
<el-image 
                            style="width: 100%; height: 100%"
                            :src="item" 
                            >
                          </el-image>    </el-carousel-item>
  </el-carousel>
 
                   <p style="font-size: 15px; color: aqua;">一个没有感情的二叔</p>
                  </div>
              </el-card>

              <!-- 分类专栏 -->
              <el-card class="box-card" style="margin-top: 20px;background-color: #DCDFE6">
                <div slot="header" class="clearfix">
                  <span>分类专栏</span>
                  <router-link to="/blogType">
                    <el-button style="float: right; padding: 3px 0" type="text">更多 <i class="el-icon-d-arrow-right"></i></el-button>         
                  </router-link>
                </div>
                <div class="text item" v-for="(item,indexTypes) in types" :key="indexTypes" >             
                      <span style="font-size: 14px;"  @click="getType(item.id)">                    
                          <el-card v-if="item.id > 0"  shadow="hover" style="margin-bottom: 5px;background-color: #DCDFE6">
                            <el-link :underline="false" style="color: #ff4400;">
                               {{item.name }}
                            </el-link>
                            <span style="float: right; color: #ff4400;"> {{item.countType}}</span>                            
                          </el-card>
                      </span>
                  <!-- <div v-if="index!=4" style="background-color: #DCDFE6;height: 1px;margin: 5px 0;"></div> -->
                </div>
              </el-card>

              <!-- 热门文章 -->
              <el-card class="box-card" style="margin-top: 20px; background-color: #DCDFE6">
                <div slot="header" class="clearfix">
                  <span>热门文章</span>
                  <el-button style="float: right; padding: 3px 0" type="text">top5</el-button>         
                </div>
                <div class="text item" v-for="(item,index) in HotBlog" :key="index" >
                  <router-link :to="'/blog/'+ item.id">
                    <el-link :underline="false">
                      <span style="font-size: 14px;">
                        <el-tag size="small">{{index + 1}}</el-tag> {{item.title}}  
                        <i style="margin-left: 5px;" class="el-icon-view"><span style="font-size: 13px;"> {{item.views}}</span></i>
                      </span>
                    </el-link>
                  </router-link>
                  <div v-if="index!=4" style="background-color: #DCDFE6;height: 1px;margin: 12px 0;"></div>
                </div>
              </el-card>

              <!-- 友情链接 -->
              <el-card class="box-card" style="margin-top: 20px;">
                 <div slot="header" class="clearfix">
                  <span>热门文章</span>
                  <el-button style="float: right; padding: 3px 0" type="text">top5</el-button>         
                </div>
                <div class="text item" v-for="(item,index) in HotBlog" :key="index" >
                  <router-link :to="'/blog/'+ item.id">
                    <el-link :underline="false">
                      <span style="font-size: 14px;">
                        <el-tag size="small">{{index + 1}}</el-tag> {{item.title}}  
                        <i style="margin-left: 5px;" class="el-icon-view"><span style="font-size: 13px;"> {{item.views}}</span></i>
                      </span>
                    </el-link>
                  </router-link>
                  <div v-if="index!=4" style="background-color: #DCDFE6;height: 1px;margin: 12px 0;"></div>
                </div>
              </el-card>
            </div>
          </el-col>

          <!-- 空白占位 -->
          <el-col :span="3">
            <div class="grid-content bg-purple">
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> -->

      <Foot style="margin-top: 80px;"></Foot>

  </div>
</template>

<script>
import Head from '@/components/Head'
import Foot from '@/components/Foot'
export default {
  name: 'Home',
  components:{ Head,Foot },
  data () {
    var img = require("../assets/image/bg.jpg");
   return {
     blogData:[],
     HotBlog:[], //热门文章
     types: [],
     total:0,
     currentPage:1,
     size:5,
     mytype:'',
     myblogTags:[],
     btags:null,
     aIndex: '1',
     img_list: ["http://49.232.151.242:9000/cywproject/360%E6%88%AA%E5%9B%BE20220821012016974.jpg", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F102920105033%2F201029105033-6-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663605745&t=b91357cce940aefb381ebd06bf388464", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F102920105033%2F201029105033-6-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663605745&t=b91357cce940aefb381ebd06bf388464", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F102920105033%2F201029105033-6-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663605745&t=b91357cce940aefb381ebd06bf388464"]
   }
  },
  mounted() {
    this.initBlog()   //页面加载时调用
    this.initHotBlog()   //页面加载时调用
    this.initAllType()   //页面加载时调用
  },
  methods:{
    // 初始化博客列表数据
    initBlog(){
      const _this = this
      this.axios.get('/blog/vuefindByPage?current=' + this.currentPage + '&size=' + this.size).then(resp=>{
        console.log(resp)
        _this.blogData = resp.data.obj.blogList
        _this.total = resp.data.obj.totals

      })
    },
    //初始化热门文章
    initHotBlog(){
      const _this = this
      this.axios.get('/blog/vuefindHotBlog').then(resp=>{
        console.log(resp)
        _this.HotBlog = resp.data.obj

      })
    },
    //查询所有分类
    initAllType(){
      const _this = this
      this.axios.get('/type/getAllType').then(resp=>{
          console.log(resp)
          _this.types = resp.data.obj
      })
    },
    //获取分类数据
    getType(id){
      console.log(id)
      this.type_id = id
      this.initBlogType()
    },
    //初始化博客数据
    initBlogType(){
      const _this = this
      this.axios.get('/blog/vuefindByPage?current=' + this.currentPage + '&size=' + this.size + '&type_id=' + this.type_id).then(resp=>{
        // console.log(resp)
        _this.blogData = resp.data.obj.blogList
        _this.total = resp.data.obj.blogList.length

      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    //分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      const _this = this
      this.axios.get('/blog/vuefindByPage?current=' + val + '&size=' + this.size).then(resp=>{
        console.log(resp)
        _this.blogData = resp.data.obj.blogList
        _this.total = resp.data.obj.totals

      })
    }
  }
}
</script>

<style scoped>
  /* 卡片 */
  .blog_card{
    width: 95%;
    margin: 2%;
  }
  /* logo */
  .logo{
    margin-left: 150px;
    font-size: 30px;
    font-family: 华文行楷;
    color: aqua !important; 
  }
  /* 左侧 */
  .blog_bg_left{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    min-height: 500px;
  }
  /* 右侧 */
  .blog_bg_right{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    min-height: 500px;
  }
  /* 分割线 */
  .fenge{ height:3px; border:none; border-top:3px solid  #1eb9e0;}

   .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>